<template>
  <div id="app">
    <!-- 轮播 -->
    <van-swipe class="demo-swipe">
      <van-swipe-item v-for="item in lunbo" :key="item.url">
        <img :src="item.img" alt="">
      </van-swipe-item>
    </van-swipe>
    <section class="van-doc-demo-block demo-icon">

      <div class="van-col van-col--8"><i class="van-icon van-icon-close">
          <!----></i><span>close</span></div>
      <div class="van-col van-col--8"><i class="van-icon van-icon-upgrade">
          <!----></i><span>upgrade</span></div>
      <div class="van-col van-col--8"><i class="van-icon van-icon-add-o">
          <!----></i><span>add-o</span></div>
      <div class="van-col van-col--8"><i class="van-icon van-icon-passed">
          <!----></i><span>passed</span></div>
      <div class="van-col van-col--8"><i class="van-icon van-icon-chat">
          <!----></i><span>chat</span></div>
      <div class="van-col van-col--8"><i class="van-icon van-icon-question">
          <!----></i><span>question</span></div>
      <div class="van-col van-col--8"><i class="van-icon van-icon-clock">
          <!----></i><span>clock</span></div>
      <div class="van-col van-col--8"><i class="van-icon van-icon-gold-coin">
          <!----></i><span>gold-coin</span></div>
      <div class="van-col van-col--8"><i class="van-icon van-icon-play">
          <!----></i><span>play</span></div>

    </section>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  name: "App",
  data: () => ({
    lunbo: []
  }),
  created() {
    this.getinfo();
  },
  methods: {
    getinfo() {
      this.$http.get("http://localhost:5000/api/getlunbo").then(res => {
        const { status, message } = res.body;
        if (status === 0) {
          this.lunbo = message;
        } else {
          Toast("加载失败");
        }
      });
    }
  }
};
</script>

<style scoped>
.demo-swipe .van-swipe-item img {
  height: 100%;
  width: 100%;
}
.demo-swipe .van-swipe {
  cursor: pointer;
}

.demo-swipe .van-swipe img {
  width: 100%;
  height: 240px;
  display: block;
  padding: 30px 60px;
  box-sizing: border-box;
  background-color: #fff;
  pointer-events: none;
}
.demo-swipe--vertical {
  height: 200px;
}
.demo-swipe--vertical .van-swipe-item {
  line-height: 200px;
}

.demo-icon {
  font-size: 0;
}
.demo-icon .van-col {
  text-align: center;
  height: 100px;
  float: none;
  display: inline-block;
  vertical-align: middle;
}
.demo-icon .van-icon {
  display: block;
  font-size: 32px;
  margin: 15px 0;
  color: rgba(69, 90, 100, 0.8);
}
.demo-icon span {
  font-size: 14px;
}
.van-col--8 {
  width: 33.33%;
}
#app{
  width: 100%;
}
.demo-swipe{
  width: 100%;
  overflow: hidden;
}
</style>
